import get from 'lodash-es/get.js';
import { h } from 'vue';

import HKWebPluginPlayer from './HKPlayer/HKWebPluginPlayer.vue';
import VlcWebPluginPlayer from './VlcWebPluginPlayer.vue';
import EzOpenWebPluginPlayer from './EzOpenWebPluginPlayer.vue';
import FlvPlayer from './FlvPlayer/FlvPlayer.vue';
import dhPlayer from './DhPlayer/index.vue';
import TslNvrPlayer from './TslNvrPlayer/index.vue';
import HZPlayer from './HZPlayer/index.vue';
import HcvsPlayer from './HcvsPlayer/index.vue';

export default {
  name: 'Player',
  props: {
    data: { type: Object, default: () => ({}) },
    playbackData: { type: Object, default: () => ({}) },
    playerOptions: { type: Object, default: () => ({}) },
  },
  computed: {
    options() {
      const dic = this.getValue('player');
      const player = this.playerEnum[dic] || this.playerEnum.D0111_1;
      return {
        component: player.component,
        attrs: player.getAttrs(),
      };
    },
  },
  methods: {
    getValue(key) {
      // const data = this.data;
      // debugger;
      const keys = String(key)
        .split('|')
        .map((i) => i.replace(/\s+/g, ''))
        .filter(Boolean);
      for (let i = 0, len = keys.length; i < len; i++) {
        const value = get(this.data, keys[i]);
        if (value !== undefined && value !== null && value !== '') {
          return value;
        }
      }
    },
  },
  created() {
    this.playerEnum = {
      D0111_1: {
        component: VlcWebPluginPlayer,
        getAttrs: () => {
          return {
            streamUrl: this.getValue('stream_url'),
          };
        },
      },
      D0111_2: {
        component: EzOpenWebPluginPlayer,
        getAttrs: () => {
          return {
            streamUrl: this.getValue('stream_url'),
            accessToken: this.getValue('accesstoken'),
          };
        },
      },
      D0111_3: {
        component: TslNvrPlayer,
        getAttrs: () => {
          const name = this.getValue('name|warn_describe');
          const code = this.getValue('code|catch_video_url');
          return {
            options: Array.isArray(code) ? code.map((item) => ({ code: item, name })) : { code: code, name },
            playbackData: this.playbackData,
          };
        },
      },
      D0111_4: {
        component: HKWebPluginPlayer,
        getAttrs: () => {
          return {
            cameraCode: this.getValue('pull_flow_conditions'),
            startTime: this.getValue('startTime'),
            endTime: this.getValue('endTime'),
            ip: this.getValue('get_stream_way') === 'HK_GX_CD' ? '119.6.79.226' : '183.223.249.216',
            port: this.getValue('get_stream_way') === 'HK_GX_CD' ? 9443 : 82,
            appKey: this.getValue('get_stream_way') === 'HK_GX_CD' ? '24326541' : '24024771',
            secretKey: this.getValue('get_stream_way') === 'HK_GX_CD' ? '6JVDpLc3UC5JAicT7Ixv' : '0K2Zwzcsev8rul0XkDeE',
          };
        },
      },
      D0111_5: {
        component: dhPlayer,
        getAttrs: () => {
          return {
            streamUrl: this.getValue('stream_url') + '&trackID=701',
          };
        },
      },
      /* 华智播放器 */
      D0111_6: {
        component: HZPlayer,
        getAttrs: () => {
          const data = this.playbackData !== undefined ? Object.assign({ playbackMode: true }, this.playbackData) : {};
          return Object.assign(data, {
            camera_name: this.getValue('monitor_name'),
            channel_id: this.getValue('pull_flow_conditions'),
          });
        },
      },
      /* 猛追 HCVS 播放器 */
      D0111_7: {
        component: HcvsPlayer,
        getAttrs: () => {
          const data = this.playbackData !== undefined ? Object.assign({ playbackMode: true }, this.playbackData) : {};
          return Object.assign({}, data, {
            channel_id: this.getValue('pull_flow_conditions'),
            stream_type: this.getValue('stream_type'),
            ws_port: this.getValue('ws_port'),
            ip: this.getValue('ip'),
            port: this.getValue('port'),
            account: this.getValue('account'),
            password: this.getValue('password'),
          });
        },
      },
      D0111_8: {
        component: FlvPlayer,
        getAttrs: () => {
          return Object.assign({}, this.data, this.playerOptions, {
            streamUrl: this.getValue('pull_flow_conditions'),
          });
        },
      },
    };
  },
  render() {
    return this.options ? h(this.options.component, Object.assign({}, this.options.attrs, this.$attrs)) : null;
  },
};
